<template>
  <div class="time_node_edit">
    <div class="btn_box">
      <el-button type="primary" class="primary_btn" @click="saveEdit">{{$t('public.save')}}</el-button>
      <!--<el-button v-show="nodeObj._id && showDeleteBtn" type="primary" class="primary_btn delete_btn" @click="deleteLi">{{$t('public.delete')}}</el-button>-->
    </div>
    <el-form v-if="showForm" :model="nodeObj" label-width="130px" ref="nodeObj" :rules="rules">
      <el-form-item class="form_li"  prop="name"  :label="$t('configLazyLoad.process.nodeName')">
        <el-input :maxlength="30" v-model.trim="nodeObj.name" class="input_box"></el-input>
      </el-form-item>
      <br/>
      <div class="time_node_date">
        <el-row class="time_node_li">
          <el-col :span="4" class="th_li">{{$t('configLazyLoad.public.date')}}</el-col>
          <el-col :span="4" class="th_li">{{$t('configLazyLoad.public.time')}}</el-col>
          <el-col :span="7" class="th_li">{{$t('configLazyLoad.public.week')}}</el-col>
          <el-col :span="1" class="th_li">{{$t('channelsettings.process42')}}</el-col>
          <el-col :span="7" class="th_li">{{$t('configLazyLoad.process.timeNode3')}}</el-col>
          <el-col :span="1" class="th_li"><i class="el-icon-plus" @click="addOne()"></i></el-col>
        </el-row>
        <el-row v-for="(date, index) in nodeObj.dates"  class="time_node_li" >
          <el-col :span="4">
            <el-input v-model="date.startDate" class="date_input start_input"></el-input>
            <el-input v-model="date.endDate" class="date_input"></el-input>
          </el-col>
          <el-col :span="4">
            <el-input v-model="date.startTime"  class="date_input start_input"></el-input>
            <el-input v-model="date.endTime"  class="date_input"></el-input>
          </el-col>
          <el-col :span="7">
            <el-checkbox  v-model="date.weekMon">{{$t('configLazyLoad.process.timeNode4')}}</el-checkbox>
            <el-checkbox  v-model="date.weekTue">{{$t('configLazyLoad.process.timeNode5')}}</el-checkbox>
            <el-checkbox  v-model="date.weekWed">{{$t('configLazyLoad.process.timeNode6')}}</el-checkbox>
            <el-checkbox  v-model="date.weekThu">{{$t('configLazyLoad.process.timeNode7')}}</el-checkbox>
            <el-checkbox  v-model="date.weekFri">{{$t('configLazyLoad.process.timeNode8')}}</el-checkbox>
            <el-checkbox  v-model="date.weekSat">{{$t('configLazyLoad.process.timeNode9')}}</el-checkbox>
            <el-checkbox  v-model="date.weekSun">{{$t('configLazyLoad.process.timeNode10')}}</el-checkbox>
          </el-col>
          <el-col :span="1">
            <el-input :maxlength="3" class="order_input" v-model="date.order"></el-input>
          </el-col>
          <el-col :span="7">
            <nodeSelect
              class="nodeSelect"
              :isObj="true"
              :dataObj = "date"
              :index="''+ index"
              @oneChange="onChange"
              onePath="processType"
              :nodeType="date.processType"
              @twoChange="onChange"
              twoPath="processTo"
              :contentId="nodeObj._id"
              :nodeLi="date.processTo"
              currentType="time"
            ></nodeSelect>
          </el-col>
          <el-col :span="1">
            <i class="el-icon-minus" @click="addOne(index)"></i>
          </el-col>
        </el-row>
      </div>
      <div class="prompit">
        {{$t('channelsettings.schedule7')}}<br/>
        {{$t('channelsettings.schedulea22')}}<br/>
        {{$t('channelsettings.schedule8')}}<br/>
        {{$t('channelsettings.schedule9')}}<br/>
        {{$t('channelsettings.schedule10')}}
      </div>
      <el-form-item class="" :label="$t('configLazyLoad.process.timeNode11')" prop="unmatchProcessTo">
        <nodeSelect
          @oneChange="onChange"
          onePath="unmatchProcessType"
          :nodeType="nodeObj.unmatchProcessType"
          @twoChange="onChange"
          twoPath="unmatchProcessTo"
          :contentId="nodeObj._id"
          :nodeLi="nodeObj.unmatchProcessTo"
          currentType="time"
        ></nodeSelect>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import * as types from '@modules/config/channelConfig/webchatSchdule/mutation-types.js'
  import nodeSelect from '../../../base/webchatNodeSelect.vue'
  import { deepClone } from '@utils/m7Utils.js'
  export default{
    name: 'timeNodeEdit',
    data () {
      return {
        rules: {
          name: [
            { required: true, message: this.$t('configLazyLoad.process.processLabel7'), trigger: 'blur' }
          ]
        },
        showForm: false,
        nodeObj: {
          _id: '', // id
          account: '', // 账户id
          type: 'time', // 节点类型
          name: '', // 节点名称
          createTime: '', // 创建时间
          createUser: '', // 创建人
          updateTime: '', // 修改时间
          updateUser: '', // 修改人
          nextNodeIds: [''], // 流转节点id数组
          dates: [
            {
              order: 999, // 优先级
              startDate: '*', // 开始日期
              endDate: '*', // 结束日期
              startTime: '*', // 开始时间
              endTime: '*', // 结束时间
              weekMon: true, // 周一
              weekTue: true, // 周二
              weekWed: true, // 周三
              weekThu: true, // 周四
              weekFri: true, // 周五
              weekSat: true, // 周六
              weekSun: true, // 周日
              processType: 'system', // 流转节点类型
              processTo: 'finish' // 流转节点id
            }
          ],
          unmatchProcessType: 'system', // 不满足条件时流转节点类型
          unmatchProcessTo: 'finish' // 不满足条件时流转节点id
        }
      }
    },
    props: {
      showDeleteBtn: {
        type: Boolean,
        default: true
      },
      dataId: {
        type: String,
        default: ''
      },
      random: Number,
      todoType: String
    },
    watch: {
      random () {
        this.resetForm()
        this.initData()
      }
    },
    methods: {
      initData () {
        this.showForm = false
        if (this.dataId) {
          let data = {
            _id: this.dataId
          }
          this.$store.dispatch('getNodeById', data).then((res) => {
            if (res.success) {
              this.$nextTick(() => {
                this.nodeObj = deepClone(res.data)
              })
            }
            this.showForm = true
          })
        } else {
          this.nodeObj = {
            _id: '', // id
            account: '', // 账户id
            type: 'time', // 节点类型
            name: '', // 节点名称
            createTime: '', // 创建时间
            createUser: '', // 创建人
            updateTime: '', // 修改时间
            updateUser: '', // 修改人
            nextNodeIds: [''], // 流转节点id数组
            dates: [
              {
                order: 999, // 优先级
                startDate: '*', // 开始日期
                endDate: '*', // 结束日期
                startTime: '*', // 开始时间
                endTime: '*', // 结束时间
                weekMon: true, // 周一
                weekTue: true, // 周二
                weekWed: true, // 周三
                weekThu: true, // 周四
                weekFri: true, // 周五
                weekSat: true, // 周六
                weekSun: true, // 周日
                processType: 'system', // 流转节点类型
                processTo: 'finish' // 流转节点id
              }
            ],
            unmatchProcessType: 'system', // 不满足条件时流转节点类型
            unmatchProcessTo: 'finish' // 不满足条件时流转节点id
          }
          this.showForm = true
        }
      },
      onChange (data) {
        this.nodeObj[data.path] = data.value
      },
      resetForm () {
        this.$refs['nodeObj'].resetFields()
      },
      addOne (index) {
        if (typeof index === 'number') {
          this.nodeObj.dates.splice(index, 1)
        } else {
          this.nodeObj.dates.push({
            order: 999, // 优先级
            startDate: '*', // 开始日期
            endDate: '*', // 结束日期
            startTime: '*', // 开始时间
            endTime: '*', // 结束时间
            weekMon: true, // 周一
            weekTue: true, // 周二
            weekWed: true, // 周三
            weekThu: true, // 周四
            weekFri: true, // 周五
            weekSat: true, // 周六
            weekSun: true, // 周日
            processType: 'system', // 流转节点类型
            processTo: 'finish' // 流转节点id
          })
        }
      },
      saveEdit () {
        let that = this
        this.$refs['nodeObj'].validate((valid) => {
          if (valid) {
            let flag = true
            this.nodeObj.dates.forEach((item) => {
              if (!this.timeCheck(item)) {
                flag = false
              }
            })
            if (!flag) return
            that.nodeObj.dates.forEach((item) => {
              item.order = parseInt(item.order)
            })
            if (this.todoType === 'add') {
              that.$store.dispatch('addNode', that.nodeObj).then((res) => {
                if (res.success) {
                  that.$store.commit(types.ADD_WEBCHAT_SCHDULE_LIST_NODE, {node: 'timeNode', data: that.nodeObj})
                  this.$message.success(this.$t('config.customer.addSucc'))
                  this.$emit('back')
                }
              })
            } else {
              that.$store.dispatch('updateNode', that.nodeObj).then((res) => {
                if (res.success) {
                  that.$store.commit(types.UPDATE_WEBCHAT_SCHDULE_LIST_NODE, {node: 'timeNode', data: that.nodeObj})
                  this.$message.success(this.$t('configLazyLoad.public.editSuccess'))
                  this.$emit('back')
                }
              })
            }
          }
        })
      },
      timeCheck (item, callback) {
        let datePattern = new RegExp(/^([1-9]|[1][012])-([1-9]|[12][0-9]|[3][01])$/)
        if (item.startDate === '') {
          this.$message.error(this.$t('configLazyLoad.process.timeNode12'))
          return false
        } else if (!datePattern.test(item.startDate) && item.startDate !== '*') {
          this.$message.error(this.$t('channelsettings.schedule29'))
          return false
        }
        if (item.endDate === '') {
          this.$message.error(this.$t('configLazyLoad.process.timeNode13'))
          return false
        } else if (!datePattern.test(item.endDate) && item.endDate !== '*') {
          this.$message.error(this.$t('channelsettings.schedule30'))
          return false
        }
        let timePattern = new RegExp(/^([01][0-9]|[2][0-3]):[0-5][0-9]$/)
        if (item.startTime === '') {
          this.$message.error(this.$t('configLazyLoad.process.timeNode14'))
          return false
        } else if (!timePattern.test(item.startTime) && item.startTime !== '*') {
          this.$message.error(this.$t('channelsettings.schedule31'))
          return false
        }
        if (item.endTime === '') {
          this.$message.error(this.$t('configLazyLoad.process.timeNode15'))
          return false
        } else if (!timePattern.test(item.endTime) && item.endTime !== '*') {
          this.$message.error(this.$t('channelsettings.schedule32'))
          return false
        } else if (item.endTime !== '*') {
          let lastNum = item.endTime.substring(item.endTime.length - 1)
          if (lastNum % 2 === 0) {
            this.$message.error(this.$t('channelsettings.schedule33'))
            return false
          }
        }
        var regu = /^[0-9]*[1-9][0-9]*$/
        if (!regu.test(item.order)) {
          this.$message.error(this.$t('configLazyLoad.process.processLabel43'))
          return false
        }
        return true
      }
    },
    components: {
      nodeSelect
    },
    beforeMount () {
      this.initData()
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../../../assets/common.styl"
  .btn_box
    text-align right
    margin-bottom 10px
  .delete_btn
    background-color #ff6b6b
    border-color #ff6b6b
  .time_node_edit
    padding 10px
  .time_node_date
    background #f4f4f4
    padding 18px 12px 0
  .el-icon-minus,.el-icon-plus
    color $c-main
    cursor pointer
  .time_node_li
    padding-bottom 12px
  .date_input
    width 36%
  .start_input
    position relative
    margin-right 24px
    &:before
      content: ''
      border-top 2px solid $c-border2
      width 16px
      position absolute
      top 15px
      right -20px
  .el-col
    padding-left 10px
  .el-select
    width 40%
  .node_select
    position relative
    margin-right 24px
    &:before
      content: ''
      border-top 2px solid $c-border2
      width 16px
      position absolute
      top 15px
      right -20px
  .prompit
    color $c-prompt
    padding 6px 0 12px
  .transfer_select
    width 200px
  .input_box
    width 400px
</style>
